<template>
	<view class="content" :style="{ paddingTop: totalheight }">
		<view v-if="barshow" class="bar" :style="{height:totalheight}"></view>
		<view class="head" :style="{ paddingTop: navBarHeight }">
			<view class="head-np">
				<image @click="back()" class="back" src="@/static/img/chat-09.png" mode="widthFix"></image>
				<!-- <uni-icons class="back" type="left" size="30" color="white"></uni-icons> -->
				<view class="title">产品列表</view>
				<image @click="record()" class="record" src="@/static/img/friend_icon.png" mode="widthFix"></image>
			</view>
		</view>
		<!-- <view class="bg_color" :style="{ top: totalheight }"></view> -->
		<swiper class="swiper" circular autoplay>
			<swiper-item >
				<image src="../../static/img/browse_bg1.png" mode="widthFix"></image>
			</swiper-item>
		</swiper>
		<view class="info" v-for="item in list" @click="details(item.id)">
			<image :src="item.goodsCoverImg" mode="aspectFill"></image>
			<view>
				<view class="info_text">{{item.goodsName}}</view>
				<view class="info_price">{{item.goodsPrice}} USDA<text>兑换价</text></view>
				<view class="info_btn">立即兑换</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		getGoodsPage
	} from '@/api/api.js'
	import navBarMixin from '@/mixin/navBarMixin.js'
	export default {
		mixins: [navBarMixin],
		data() {
			return {
				barshow: false,
				page: 1,
				size: 10,
				list: '',
			}
		},
		onLoad() {
			this.goods()
		},
		onShow() {
		},
		mounted() {},
		methods: {
			goods() {
				getGoodsPage({
					pageNum:this.page,
					pageSize:this.size
				}).then(res=>{
					console.log(res);
					if(res.code==0) {
						this.list = res.data.records
					}
				})
			},
			back(id) {
				uni.navigateBack()
			},
			details(e) {
				uni.navigateTo({
					url:'/pages/browse/details?id='+e
				})
			},
			record(e) {
				uni.navigateTo({
					url: '/pages/me/extractveTem?type=19'
				})
			}
		},
		onPageScroll(e) {
			// console.log(e);
			if (e.scrollTop > 30) {
				this.barshow = true
			} else {
				this.barshow = false
			}
		},
	}
</script>

<style scoped lang="less">
	.content {
		overflow: hidden;
		background-color: white;
		padding-bottom: 50rpx;
		position: relative;
		width: 100vw;
		height: 100vh;
		background: url('@/static/img/browse_bg.png') no-repeat;
		background-size: contain;
	}

		.bar {
			width: 100vw;
			position: fixed;
			top: 0;
			left: 0;
			z-index: 22;
			animation: bg 0.8s 1 both linear;
			background-color: #B1DBFE;
		}

	.head {
		position: fixed;
		top: 0;
		z-index: 33;
		width: 100%;

		.head-np {
			display: flex;
			justify-content: center;
			align-items: center;
			width: 100%;
			height: 96rpx;
			padding: 0 30rpx;
			// box-shadow: 0rpx 10rpx 10rpx 0rpx rgba(50, 50, 50, 0.1);
			box-sizing: border-box;
			position: relative;

			.title {
				font-size: 36rpx;
				font-weight: bold;
			}

			.back {
				width: 20rpx;
				position: absolute;
				left: 30rpx;
			}
			.record {
				width: 42rpx;
				position: absolute;
				right: 30rpx;
			}

		}
	}

	.bg_color {
		width: 100vw;
		height: 600rpx;
		// background: linear-gradient(to bottom, #D2E6FF 1%, #ffffff 90%);
		position: absolute;
		left: 0;
	}

	.swiper {
		height: 250rpx;
		margin: 30rpx;
		// background-color: pink;
	}

	.swiper image {
		width: 690rpx;
		border-radius: 16rpx;
	}
	
	.info {
		width: 690rpx;
		height: 270rpx;
		background: #FFFFFF;
		border-radius: 18rpx;
		display: flex;
		align-items: center;
		margin: 20rpx auto;
		image {
			width: 180rpx;
			height: 180rpx;
			margin: 0 30rpx;
		}
		>view {
			flex: 1;
			text-align: center;
			margin-right: 20rpx;
		}
		.info_text {
			display: -webkit-box;
			  -webkit-line-clamp: 1;
			  -webkit-box-orient: vertical;
			  overflow: hidden;
			  text-overflow: ellipsis;
			font-size: 28rpx;
		}
		.info_price {
			display: flex;
			// align-items: center;
			justify-content: center;
			font-weight: 700;
			font-size: 42rpx;
			color: #FF453A;
			line-height: 60rpx;
			margin-top: 14rpx;
			view {
				font-weight: 400;
				font-size: 28rpx;
				margin-left: 4rpx;
			}
			text {
				font-weight: 400;
				font-size: 24rpx;
				margin-left: 14rpx;
			}
		}
		.info_btn {
			width: 202rpx;
			height: 64rpx;
			line-height: 64rpx;
			background: #3F93FF;
			border-radius: 42rpx;
			font-weight: 500;
			color: #FFFFFF;
			font-size: 26rpx;
			margin: 14rpx auto 0;
		}
	}
</style>